<template>
  <div class="risk-point-box flex flex-column width-100 margint-15">
    <div class="risk-point-item flex marginb-5" v-for="(item, index) in riskList" :key="item[filedId] + index">
      <span class="point-item-index">{{ index + 1 }}.</span>
      <div class="point-item-content flex flex-space-between">
        <div class="point-name"> {{ item[filedId] }} </div>
        <div class="point-suffix flex gap-15">
          <span class="point-suffix-icon">
            <i class="iconfontShuzhi" :class="'icon-' + item.type"></i>
          </span>
          <!-- <span class="point-alarm-sum">
            {{ item[filedValue] }}
          </span> -->
          <span class="point-unit" :class="'risk-level-' + compLevel(item[filedValue])[0].raw.listClass">
            <!-- <dict-tag :options="dict.type.risk_level" :value="item[filedValue]" /> -->
            {{ compLevel(item[filedValue])[0].label }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getProjectPointRiskList } from '../api'
export default {
  dicts: ["risk_level"],
  // props: {
  //   riskList: {
  //     type: Array,
  //     default: () => []
  //   },
  //   filedId: {
  //     type: String,
  //     default: 'name'
  //   },
  //   filedValue: {
  //     type: String,
  //     default: 'value'
  //   },
  //   unit: {
  //     type: String,
  //     default: '件'
  //   }
  // },
  data () {
    return {
      riskList: [],
      filedId: 'riskName',
      filedValue: 'riskLevel',
      unit: '级'
    };
  },
  computed: {},
  watch: {},
  methods: {
    async getData (deptId) {
      try {
        const params = {
          deptId
        }
        const response = await getProjectPointRiskList(params)
        if (response) {
          this.riskList = response
          // this.initTeamList(response.data)
        }
      }
      catch (err) {
        console.log(err)
      }
    },
    compLevel (level) {
      const riskLevel = this.dict.type.risk_level.filter(item => { return item.value == level })
      return riskLevel
    }
  },
  created () {

  },
  mounted () {

  },
}
</script>

<style lang='less' scoped>
@states: primary, warning, success, danger;
@colors: {
  warning: @warning;
  success: @success;
  danger: @danger;
  primary: @primary
};

.risk-point-box {
  height: calc(100% - 15px);
  .risk-point-item {
    align-items: center;
    height: 34px;
    .point-item-index {
      font-family: Oswald, Oswald;
      font-weight: 500;
      font-size: 14px;
      color: #30dcff;
      padding: 0 5px;
      box-sizing: border-box;
    }
    .point-item-content {
      background: url("@/assets/images/dashboard/risk-box_bg.png") no-repeat;
      padding: 0 15px;
      flex: 1;
      box-sizing: border-box;
      .ponit-name {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: #ffffff;
      }
      .point-suffix {
        .point-alarm-sum {
          font-family: Oswald, Oswald;
          font-weight: 400;
          font-size: 24px;
          color: #ffffff;
        }
        .point-unit {
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 400;
          font-size: 12px;
        }
        each(@colors, {
          .risk-level-@{key} {
            color:@value;
          }
        });
      }
    }
  }
}
</style>